<template>
  <div class="trad-detail" v-loading="loading">
    <!-- 头部信息 -->
    <div class="order-line">
      <div class="order-status">
        <div class="order-number">
          <p>订单号：{{ detail.orderNo }}</p>
          <p class="table-btn" style="margin-left: 10px" @click="copyOrderNo(detail.orderNo)">复制</p>
        </div>
        <p class="status">状态：{{ detail.orderStatusDesc }}</p>
        <p class="status">类型：{{ detail.serveType ? '顾问模式'  : '普通模式' }}</p>
      </div>
      <div class="line" v-if="detail && detail.progress">
        <HtimeLine :timeLine="detail.progress" />
      </div>
    </div>

    <!-- 备注列表 -->
    <div class="bz-title">
      <topTitle title="备注信息"/>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <el-card class="box-card box-card-active" :body-style="{ 'padding': '0px'}">
        <div class="haozhu-title">
          <div>号主：<span class="table-btn" @click="goUserDetail(seller.jumpUserId)">{{ seller.jumpUserId }}</span></div>
          <el-button type="primary" @click="addSub(null, seller)">添加备注</el-button>
        </div>
        <div class="sub-wrap">
            <template v-if="seller.userRemarkVoList && seller.userRemarkVoList.length > 0">
                <div class="sub-list" :style="{ 'min-height': '260px', 'overflow-y': 'scroll'}">
                    <div class="sub-row" v-for="item in seller.userRemarkVoList" :key="item.remarkId">
                        <div class="top">
                            <div class="name">{{ item.nickName }}</div>
                            <div class="time">{{ item.updateTime }}</div>
                            <i class="el-icon-edit" style="color: #409EFF; margin-right: 10px" @click="addSub(item, seller)"></i>
                            <i class="el-icon-delete" style="color: #F56C6C" @click="delSub(item)"></i>
                        </div>
                        <div class="bottom">{{ item.remark }}</div>
                        <div style="color: #909399; font-size: 12px;" v-if="item.source">来源：{{ item.source }} <span class="table-btn" @click="goDetail(item)">{{ item.number }}</span></div>
                    </div>
                </div>
                <!-- <div class="sub-botton" @click="showAll(0)"><i class="el-icon-caret-bottom"></i></div> -->
                <div class="sub-botton"></div>
            </template>
            <template v-else>
              <div style="font-size: 12px; color: #909399; text-align: center;padding-top: 20px">暂无备注~</div>
            </template>
        </div>
      </el-card>

      <el-card class="box-card box-card-active" :body-style="{ 'padding': '0px'}">
        <div class="haozhu-title">
          <div>买家：<span class="table-btn" @click="goUserDetail(buyer.jumpUserId)">{{ buyer.jumpUserId }}</span></div>
          <el-button type="primary" @click="addSub(null, buyer)">添加备注</el-button>
        </div>
      
        <div class="sub-wrap">
            <template v-if="buyer.userRemarkVoList && buyer.userRemarkVoList.length > 0">
                <div class="sub-list" :style="{ 'min-height': '260px', 'overflow-y': 'scroll'}">
                    <div class="sub-row" v-for="item in buyer.userRemarkVoList" :key="item.remarkId">
                        <div class="top">
                            <div class="name">{{ item.nickName }}</div>
                            <div class="time">{{ item.updateTime }}</div>
                            <i class="el-icon-edit" style="color: #409EFF; margin-right: 10px" @click="addSub(item, buyer)"></i>
                            <i class="el-icon-delete" style="color: #F56C6C" @click="delSub(item)"></i>
                        </div>
                        <div class="bottom">{{ item.remark }}</div>
                        <div style="color: #909399; font-size: 12px;" v-if="item.source">来源：{{ item.source }} <span class="table-btn"  @click="goDetail(item)">{{ item.number }}</span></div>
                    </div>
                </div>
                <!-- <div class="sub-botton" @click="showAll(2)"><i class="el-icon-caret-bottom"></i></div> -->
                <div class="sub-botton"></div>
            </template>
            <template v-else>
              <div style="font-size: 12px; color: #909399; text-align: center;padding-top: 20px">暂无备注~</div>
            </template>
        </div>
      </el-card>

    </div>
    
    <!-- 账号信息 -->
    <div v-if="account">
      <topTitle title="订单信息"/>
      <el-card class="box-card">
        <div class="table-title">
          <span>付款信息</span>
          <span>账号</span>
          <span>号主</span>
          <span>买家</span>
        </div>
        <div class="table-content">
          <div class="item">
            <div class="mes">售价：{{ pay.sellPrice }}</div>
            <div class="mes">保费：{{ pay.insurePrice }} <span v-if="pay.dayNum">（{{ pay.dayNum}}天）</span></div>
            <div class="mes" v-if="detail.orderStatus === 0">待支付：{{ pay.waitPrice }}<i class="el-icon-edit" style="color:#409EFF; cursor:pointer; margin-left: 10px" @click="editPrice = true"></i></div>
            <div class="mes">实付：{{ pay.payMoney }}</div>
            <div class="mes">优惠：{{ pay.reducePrice }}</div>
          </div>
          <div class="item">
            <div class="mes">
              <div>账号：</div>
              <div class="table-btn" @click="goAccountDetail(account.dataId)" v-html="account.qq"></div>
            </div>
            <div class="mes">游戏：{{ account.game }}</div>
            <div class="mes">区服：{{ account.role }}</div>
            <div class="mes">估值：{{ account.worth }}</div>
          </div>
          <div class="item">
            <div class="mes">
              <div>趣ID：</div>
              <div class="table-btn" @click="goUserDetail(seller.jumpUserId)" v-html="seller.userId"></div>
            </div>
            <div class="mes">昵称：{{ seller.nickName }}</div>
            <div class="mes">
              <div>联系手机：</div>
              <div v-html="seller.phone"></div>
            </div>
            <!-- <div class="mes" v-if="seller.userAdviseInfoVo && seller.userAdviseInfoVo.adviseUserId">
              <p style="color: rgb(103, 194, 58)">顾问：{{ seller.userAdviseInfoVo.adviseUserId }} ({{ seller.userAdviseInfoVo.adviseUserName}})</p>
            </div> -->
            <div class="mes">
              <div>姓名：</div>
              <div v-html="seller.name"></div>
            </div>
            <div class="mes">
              <div>身份证号：</div>
              <div v-html="seller.idcard"></div>
            </div>
          </div>
          <div class="item">
            <div class="mes">
              <div>趣ID：</div>
              <div class="table-btn" @click="goUserDetail(buyer.jumpUserId)" v-html="buyer.userId"></div>
            </div>
            <div class="mes">昵称：{{ buyer.nickName }}</div>
            <div class="mes">
              <div>联系手机：</div>
              <div v-html="buyer.phone"></div>
            </div>
            <!-- <div class="mes" v-if="buyer.userAdviseInfoVo && buyer.userAdviseInfoVo.adviseUserId">
              <p style="color: rgb(103, 194, 58)">顾问：{{ buyer.userAdviseInfoVo.adviseUserId }} ({{ buyer.userAdviseInfoVo.adviseUserName}})</p>
            </div> -->
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 退款信息 -->
    <div v-if="refund && refund.length">
      <topTitle title="退款信息"/>
      <el-card class="box-card">
        <div class="table-title">
          <span>退款类型</span>
          <span>退款金额(元)</span>
          <span>申请时间</span>
          <span>退款原因</span>
          <span>退款状态</span>
          <span>退款时间</span>
        </div>
        <div class="table-content" v-for="(item, index) in refund" :key="index">
          <div class="item">
            <div class="mes">{{ item.type }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ item.money }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ item.applyTime }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ item.reason || '-' }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ item.status }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ item.refundTime }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 服务信息 -->
    <div v-if="![0,1,4].includes(Number(detail.orderStatus)) && dealAccountInsureVo && dealAccountInsureVo.id">
      <topTitle title="服务信息"/>
      <el-card class="box-card">
        <div class="table-title">
          <span>保单</span>
          <span>投保用户</span>
          <span>生效时间</span>
          <span>保障时长（天）</span>
          <span>状态</span>
          <span>操作</span>
        </div>
        <div class="table-content">
          <div class="item">
            <div class="mes">{{ dealAccountInsureVo.id }} <span class="table-btn" style="margin-left: 5px" @click="copyInsureVo(dealAccountInsureVo.id)">复制</span></div>
          </div>
          <div class="item">
            <div class="mes"><span class="table-btn" @click="goUserDetail(dealAccountInsureVo.payerUserId)">{{ dealAccountInsureVo.payerUserId }}</span></div>
          </div>
          <div class="item">
            <div class="mes">{{ formatDate(dealAccountInsureVo.updateTime, 'YYYY-MM-DD HH:MM') }}</div>
          </div>
          <div class="item">
            <div class="mes">{{ dealAccountInsureVo.dayNum || '-' }}</div>
          </div>
          <div class="item">
            <div class="mes">
              <span :style="{ 'color': dealAccountInsureVo.status === 1 ? 'rgb(103, 194, 58)' : dealAccountInsureVo.status === 3 ? 'red' : '#333'}">{{ insureVoStatus[dealAccountInsureVo.status + ''] }}</span>
              <span v-if="dealAccountInsureVo.status === 1">（有效期至{{ formatDate(dealAccountInsureVo.dueTime, 'YYYY-MM-DD') }}）</span>
            </div>
          </div>
          <div class="item">
            <div class="mes" v-if="dealAccountInsureVo.operateStatus" @click="tuikuanShow(dealAccountInsureVo.id)"><span class="table-btn">赔付</span></div>
            <div class="mes" v-else>-</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 交易详情 -->
    <div>
      <div class="detail-title">
        <topTitle title="交易详情"/>
        <div class="right-action">
          <span class="sub">点击查看对话: </span>
          <!-- <div class="action" v-if="!detail.serveType">
            <span class="table-btn" @click="getChat">买家与卖家</span>
          </div>
          <div style="margin-right: 20px;" v-if="!detail.serveType">
            <el-popconfirm
              confirm-button-text='复制并跳转'
              cancel-button-text=''
              @confirm="copyToClip(detail.orderUserMessageUrl)"
              width="300"
              hide-icon
              :title="`如跳转失败，请访问美冾历史页面查询 “访客标识”，
              搜索 ${getStrUrlParam(detail.orderUserMessageUrl) }`"
            >
              <div class="action" slot="reference" @click="seeChatkf(detail.orderUserMessageUrl, buyer.userAdviseInfoVo)">
                <span class="table-btn">买家与客服</span>
                <img class="right-icon" src="./img/right-fill.png" />
              </div>
            </el-popconfirm>
          </div> -->
          <div style="margin-right: 10px;" v-if="detail.serveType">
            <div class="action" slot="reference" @click="adviserChat(buyer.userAdviseInfoVo)">
                <span class="table-btn">买家与顾问</span>
                <img class="right-icon" src="./img/right-fill.png" />
              </div>
          </div>
          
          <!-- <div v-if="!detail.serveType">
              <el-popconfirm
                confirm-button-text='复制并跳转'
                cancel-button-text=''
                @confirm="copyToClip(detail.accountMessageUrl)"
                width="300"
                hide-icon
                :title="`如跳转失败，请访问美冾历史页面查询 “访客标识”，
                搜索 ${getStrUrlParam(detail.accountMessageUrl) }`"
              >
              <div class="action" slot="reference" @click="seeChatkf(detail.accountMessageUrl)">
                <span class="table-btn">卖家与客服</span>
                <img class="right-icon" src="./img/right-fill.png" />
              </div>
            </el-popconfirm>
          </div> -->
          <div v-if="detail.serveType">
            <div class="action" slot="reference" @click="adviserChat(seller.userAdviseInfoVo)">
              <span class="table-btn">卖家与顾问</span>
              <img class="right-icon" src="./img/right-fill.png" />
            </div>
          </div>
          <div>
            <div class="action" slot="reference" @click="serviceChat(buyer.userAdviseInfoVo)">
              <span class="table-btn">买家与客服</span>
              <img class="right-icon" src="./img/right-fill.png" />
            </div>
          </div>
          <div>
            <div class="action" slot="reference" @click="serviceChat(seller.userAdviseInfoVo)">
              <span class="table-btn">卖家与客服</span>
              <img class="right-icon" src="./img/right-fill.png" />
            </div>
          </div>

        </div>
      </div>
      <el-card class="box-card" :body-style="{ 'padding': 'none'}" v-if="dealDetail">
        <div class="sub-wrap">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in dealDetail"
              :key="index"
              icon="el-icon-help"
              color="#66b1ff"
              :timestamp="activity.time">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="bottom-action">
          <el-button v-if="![0,1,3].includes(Number(detail.orderStatus))" type="primary" @click="tuikuanShow(null)">订单退款</el-button>
          <el-button type="normal" @click="operation('人工换绑成功', 3)">人工换绑成功</el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 退款 -->
    <el-dialog
        class="dialog-box"
        :title="`请输入${opreaText}`"
        :visible.sync="dialogVisible"
        width="500px">
        <div>
            <span v-if="opreaText !== '人工换绑成功'">订单金额（元）：</span>
            <el-input type="textarea" maxlength="200" rows="3" v-model.trim="reason"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeStatusPauseOff">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 客服谈话抽屉 -->
    <el-drawer
      size="35%"
      :visible.sync="visible"
      direction="rtl">
      <template v-if="!serviceData.length">
        <chat :fromAccount="fromAccount" :chat="chat" @load="getChat" />
      </template>
      <template v-if="serviceData.length > 0">
        <qiyuChat :chat="serviceData" @load="getChat"/>
      </template>
    </el-drawer>
    <!-- 退款弹框 -->
    <el-dialog
        class="dialog-box"
        :title="`订单退款`"
        :visible.sync="tuikuanVisible"
        width="560px">
        <div class="tuikuan-body">
            <div class="title">当前状态：</div>
            <div class="tk-list">
              <span>买家支付：</span>
              <span>{{ dealOrderRefundDescVo.orderUserApply }}</span>
            </div>
            <div class="tk-list">
              <span>已退款：</span>
              <span>{{ dealOrderRefundDescVo.orderUserDrawBack || 0 }}</span>
            </div>
            <div class="tk-list" v-if="![2,3,5].includes(detail.orderStatus)">
              <span>卖家余额：</span>
              <span>{{ dealOrderRefundDescVo.accountBalance }}</span>
            </div>
            <div class="tk-list" v-if="![2,3,5].includes(detail.orderStatus)">
              <span>卖家收益：</span>
              <span>{{ dealOrderRefundDescVo.accountIncome }}</span>
              <span :style="{'margin-left': '5px', 'color': dealOrderRefundDescVo.hasReceived ? 'rgb(103, 194, 58)' : 'red'}">{{ dealOrderRefundDescVo.hasReceived ? '已到账' : '未到账' }}</span>
            </div>
            <div class="tk-list" v-if="![2,3,5].includes(detail.orderStatus)">
              <span>已收回：</span>
              <span>{{ dealOrderRefundDescVo.accountUserRefundPrice }}</span>
            </div>
            <div class="title">
              <span>退款金额：</span>
            </div>
            <div class="tk-list">
              <span>退回买家：</span>
              <span>{{ dealOrderRefundDescVo.nowOperateOrderUserDrawBack }}</span>
            </div>
            <div class="tuk title">
              <div class="tk-con" v-if="![2,3,5].includes(detail.orderStatus)">
                <div class="label">卖家收回：</div>
                <div class="left">
                  <el-input type="number" style="width:80px;" v-model.trim="accountGetCoin"></el-input>
                  <span>金币</span>
                </div>
                <div class="right">
                  <el-input type="number" style="width:80px;" v-model.trim="diamondUserBalance"></el-input>
                  <span>趣宝石</span>
                </div>
              </div>
            </div>
            <div class="tk-list">
              <span>退款原因：</span>
              <el-input type="textarea" maxlength="160" rows="3" v-model.trim="tkReason"></el-input>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="tuikuanVisible = false">取 消</el-button>
            <el-button type="primary" @click="refundAction">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 添加备注信息 -->
    <el-dialog :title="subTitle" :visible.sync="subFlag" width="400px">
        <div style="padding: 10px 0 20px;">
            <el-input v-model="subContent" maxlength="200" show-word-limit type="textarea"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="subFlag = false">取 消</el-button>
            <el-button type="primary" @click="subConfirm">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 改价信息 -->
    <el-dialog title="修改金额" :visible.sync="editPrice" width="400px">
      <div class="price-msg">
          <span>账号售价：{{pay.sellPrice}} 元</span>
          <span style="margin-left: 10px">后台低价：{{pay.basePrice}} 元</span>
        </div>
        <div class="price-msg" style="margin-top: 20px">
            <span style="min-width: 120px">订单金额（元）：</span><el-input v-model="priceContent" ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editPrice = false">取 消</el-button>
            <el-button type="primary" @click="confirmPrice">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import chat from './chat'
import qiyuChat from './qiyuChat'
import HtimeLine from './timeLine'
import { formatDate, getStrUrlParam } from '@/utils/utils'
export default {
  components: {
    chat,
    HtimeLine,
    qiyuChat
  },
  data () {
    return {
      loading: false,
      subFlag: false, // 添加备注信息
      subContent: '',
      subTitle: '添加备注',
      subRemarkId: null,
      userRemarks: [],
      allFlag: false,
      allFlag2: false,
      tabeList: [],
      infoTable: [],
      account: {},
      buyer: {},
      dealDetail: [],
      pay: {},
      refund: [],
      seller: {},

      visible: false,
      dialogVisible: false,
      opreaText: '',
      reason: '',
      operationStatus: 0, // 1 -> 退款 2 -> 发起找回 3 -> 人工换绑成功
      detail: {},
      dealAccount: {},
      fromAccount: '101981',
      chat: {},
      orderId: '',
      fjDate: '',
      QQnumber: '',
      idCard: '',
      remark: '',
      dialogType: 0,
      tuikuanVisible: false,
      dealOrderRefundDescVo: {},
      accountGetCoin: null,
      diamondUserBalance: null,
      tkReason: '',
      editPrice: false,
      priceContent: '',
      jumpUserId: null, // 备注关联ID
      dealAccountInsureVo: [],
      insureVoStatus: { // 保单状态
        '0': '待生效',
        '1': '保障中',
        '2': '已失效',
        '3': '已赔付',
        '4': '已作废',
        '-1': '未投保',
      },
      insureId: null,
      serviceData: []
    }
  },
  mounted () {
    this.orderId = this.$route.query.orderId
    this.getDetail()
  },
  methods: {
    // 买家卖家客服
    serviceChat(user) {
      this.loading = true
      let params = {
        userId: user && user.sourceId
      }
      this.$http.get(`/qiyu/selectChat`, { params }).then(res => {
          this.loading = false
          if (res.code === '0') {
              this.serviceData = res.data
              this.visible = true
          } else {
              this.serviceData = []
              this.visible = false
              this.$message({
                  type: 'error',
                  message: res.desc
              })
          }
      })
    },
    // 复制保单
    copyInsureVo (url) {
      const aux = document.createElement('textarea')
      aux.innerHTML = url
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
    },
    // 改价
    confirmPrice() {
      let params = {
          orderId: this.$route.query.orderId,
          accountPrice: this.priceContent
      }
      this.$http.post(`/deal/changePrice`, params).then(res => {
          if (res.code === '0') {
              this.$message({
                  type: 'success',
                  message: '修改成功'
              })
              this.editPrice = false
              this.getDetail()
          } else {
              this.$message({
                  type: 'error',
                  message: res.desc
              })
          }
      })
    },
    // 添加备注
    addSub(content, user) {
        this.subFlag = true
        this.subContent = ''
        this.jumpUserId = user.jumpUserId
        if (content && content.remarkId) {
            this.subRemarkId = content.remarkId
            this.subTitle = '编辑备注'
            this.subContent = content.remark
        }
    },
    // 展开全部
    showAll (flag) {
        if (flag) {
          this.allFlag2 = !this.allFlag2
          return
        }
        this.allFlag = !this.allFlag

    },
    goDetail (item) {
      if (!item.jumpType) {
        this.$message({
            type: 'error',
            message: '跳转失败'
        })
      } else if (item.jumpType === 1) {
        const { href } = this.$router.resolve({ path: '/seller/accTradingDetail', query: { dataId: item.businessId, status, type: 0 } })
        window.open(href, '_blank')
      } else if (item.jumpType === 2) {
        const { href } = this.$router.resolve({ path: '/seller/tradOrderDetail', query: { orderId: item.businessId } })
        window.open(href, '_blank')
      }  
    },
    // 确定添加或编辑备注
    subConfirm () {
        let params = {
            beRemarkUserId: this.orderId,
            remark: this.subContent,
            businessUserId: this.jumpUserId
        }
        let url = `/user/addRemark`
        if (this.subRemarkId) {
            url = `/user/editRemark`
            params.remarkId = this.subRemarkId || 0
        } else {
          params.remarkType = 1
        }
        this.$http.post(url, params).then(res => {

            if (res.code === '0') {
                this.subFlag = false
                this.getDetail()
                this.$message({
                    type: 'success',
                    message: this.subRemarkId ? '编辑成功' : '添加成功'
                })
                this.subRemarkId = null
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        })
      },
      // 删除备注
      delSub (item) {
          console.log('删除备注')
          this.$http.post(`/user/delRemark`, {
              remarkId: item.remarkId
          }).then(res => {
              if (res.code === '0') {
                  this.$message({
                      type: 'success',
                      message: '删除成功'
                  })
                  this.getDetail()
              } else {
                  this.$message({
                      type: 'error',
                      message: res.desc
                  })
              }
          })
      },
    // 复制订单
    copyOrderNo (orderNo) {
      const aux = document.createElement('textarea')
      aux.innerHTML = orderNo
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
    },
    // 复制客服地址
    copyToClip (url) {
      const aux = document.createElement('textarea')
      aux.innerHTML = `${getStrUrlParam(url, 'id')}`
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
      setTimeout(() => {
        window.open(`https://app.meiqia.com/history`)
      }, 1500)
    },
    getStrUrlParam(url) {
      return getStrUrlParam(url, 'id')
    },
    // 退款弹框
    tuikuanShow (insureId) {
      this.tuikuanVisible = true
      this.operationStatus = 1
      this.accountGetCoin = null
      this.diamondUserBalance = null
      this.insureId = insureId
      this.tkReason = this.dealOrderRefundDescVo.refundMessage || ''
    },
    // 添加黑名单
    addBlackName (type) {
      this.blockFlag = true
      this.dialogType = type
      this.fjDate = ''
      this.remark = ''
      if (type === 0) {
        this.idCard = ''
        this.QQnumber = this.detail.accountNo
        return
      }
      this.QQnumber = ''
      this.idCard = this.detail.userIdCardVo.idcard
    },
    // 添加/编辑黑名单 api
    setAuditStatus () {
        let url = '/black/addTradeAccountBlack'
        let arr = []
        let params = {}
        this.blockFlag = true

        if (this.QQnumber) arr.push({ type: 1, number: this.QQnumber })
        if (this.idCard) arr.push({ type: 2, number: this.idCard })
        // if (this.phone) arr.push({ type: 3, number: this.phone })
        params = {
          remark: this.remark,
          endTime: this.fjDate,
          sourceType: 1,
          sourceNo: this.detail.orderNo,
          tradeAccountBlackContentList: [...arr]
        }
        if (!this.fjDate) return this.$message({ type: 'error', message: '请选择封禁日期' })
        this.$http.post(url, params).then(res => {
          if (res.code === '0') {
            this.blockFlag = false
            this.remark = ''
            this.$message({
                type: 'success',
                message: '封禁成功'
            })
            this.getDetail()
          } else {
            this.$message({
                type: 'error',
                message: res.desc
            })
          }
        })
    },
    // 查看用户详情
    goUserDetail (id) {
        console.log(id, 'eee')
        const { href } = this.$router.resolve({
            path: '/dataReport/userInfo',
            query: {
                id
            }
        })
        window.open(href, '_blank')
    },
    getDetail () {
        this.$http.get('/deal/selectOrderDetailV1', {
          params: {
            orderId: this.orderId
          }
        }).then(res => {
            if (res.code === '0') {
              this.detail = res.data
              this.account = res.data.account
              this.buyer = res.data.buyer
              this.dealDetail = res.data.dealDetail
              this.pay = res.data.pay
              this.refund = res.data.refund
              this.seller = res.data.seller
              this.dealOrderRefundDescVo = res.data.dealOrderRefundDescVo
              this.dealAccountInsureVo = res.data.dealAccountInsureVo
            } else {
              this.$message({
                  type: 'error',
                  message: res.desc
              })
            }
        })
    },
    getChat () {
        this.loading = true
        this.$http.get('/deal/selectMessage', {
          params: {
            orderId: this.orderId,
            maxCnt: 10
          }
        }).then(res => {
            if (res.code === '0') {
              if (!res.data.dealMessageEntryVoList) {
                this.$message.error('暂无聊天记录')
                this.loading = false
                return
              }
              this.chat = res.data
              this.fromAccount = res.data.dealMessageEntryVoList[0].fromAccount
              this.visible = true
            } else {
              this.$message({
                  type: 'error',
                  message: res.desc
              })
            }
            this.loading = false
        })
    },
    setStatus (status) {
      let text = ''
      switch (status) {
        case 0:
          text = '待支付'
          break
        case 1:
          text = '取消订单'
          break
        case 2:
          text = '待验号'
          break
        case 3:
          text = '退款中'
          break
        case 4:
          text = '已退款'
          break
        case 5:
          text = '换绑信息'
          break
        case 6:
          text = '交易完成'
          break
      }
      return text
    },
    operation (txt, status) {
      this.reason = ''
      this.opreaText = txt
      this.operationStatus = status
      this.dialogVisible = true
    },
    changeStatusPauseOff () {
      if (this.reason !== this.opreaText && this.operationStatus !== 1) {
        this.$message.error('请输入' + this.opreaText)
        return
      }
      if (this.operationStatus === 1) {
        // this.refund(this.reason)
      } else if (this.operationStatus === 2) {
        this.findStatus(1)
      } else {
        this.changePhone()
      }
    },
    changePhone () {
      this.$http.get('/deal/changePhoneSuccess', {
        params: {
          orderId: this.orderId
        }
      }).then(res => {
        if (res.code === '0') {
          this.getDetail()
          this.$message({
              type: 'success',
              message: '人工换绑成功'
          })
        } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
        }
        this.dialogVisible = false
      })
    },
    findStatus (status) {
      this.$http.get('/deal/updateAccountFindStatus', {
        params: {
          orderId: this.orderId,
          status
        }
      }).then(res => {
        if (res.code === '0') {
          let message = ''
          let openFind = 2
          if (status === 1) {
            message = '已发起找回'
            openFind = 2
          } else {
            message = '已关闭找回'
            openFind = 1
          }
          this.$set(this.detail, 'openFind', openFind)
          this.$message({
              type: 'success',
              message
          })
        } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
        }
        this.dialogVisible = false
      })
    },
    // 退款
    refundAction () {
      let params = {
        orderId: this.orderId,
        message: this.tkReason,
        accountGetCoin: this.accountGetCoin, // 金币
        diamondUserBalance: this.diamondUserBalance // 宝石
      }
      // 如果是退保费
      if (!this.insureId) {
        params.type = 0
        delete params.insureId
      } else {
        params.type = 1
        params.insureId = this.insureId
      }

      this.$http.get('/deal/orderDrawBack', {
        params
      }).then(res => {
        if (res.code === '0') {
          this.$message.success('退款成功')
          this.getDetail()
        } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
        }
        this.tuikuanVisible = false
      })
    },
    goAccountDetail (dataId) {
      const { href } = this.$router.resolve({
          path: '/seller/accTradingDetail',
          query: {
            dataId,
            status: 0,
            type: 0
          }
      })
      window.open(href, '_blank')
    },
    seeChatkf (url) {
      if (url) {
        window.open(url)
      } else {
        this.$message.error('暂无聊天记录')
      }
    },
    adviserChat (user) {
      this.loading = true
      this.serviceData = []
      this.$http.get(`/deal/selectJsonMessageByUserId`, {
        params: { 
          formUserId: user && user.adviseUserId,
          toUserId: user && user.sourceId
        }   
      }).then(res => {
        this.loading = false
        if (res.code === '0') {
          if (!res.data.dealMessageEntryVoList) {
            this.$message.error('暂无聊天记录')
            return
          }
          this.chat = res.data
          this.fromAccount = res.data.dealMessageEntryVoList[0].fromAccount
          this.visible = true
        } else {
          this.$message.error(res.desc)
        }
      }).catch(() => {
          this.loading = false
      })
    },
    formatDate (time, type) {
      return formatDate(time, type)
    }
  }
}
</script>
<style lang="scss">
  .trad-detail {
    .indemnity-wrap {
      .title {
        font-size: 14px;
        font-weight: 900;
        color: #333;
        margin-bottom: 10px;
      }
      .content {
        margin-left: 10px;
        .item {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 10px;
          .label {
            color: #333;
            margin-right: 10px;
          }
          .sub {
            color: #c4c4c4;
          }
        }
      }
      
    }
    .haozhu-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #EBEEF5;
      font-size: 14px;
      background-color: #f5f5f5;
    }
    .price-msg {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .table-title {
        border-bottom: 1px solid #EBEEF5;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        font-weight: 700;
        font-size: 14px;
        text-align: left;
        span {
          padding: 0px 10px;
          flex: 1;
        }
    }
    .table-content {
      display: flex;
      .item {
        flex: 1;
        .mes {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 6px 10px 0px;
          text-align: left;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          line-height: 23px;
          font-size: 14px;
        }
      }
    }
    .bottom-action {
      padding-top: 20px;
      border-top: 1px solid #EBEEF5;
    }
    .order-line {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;
      margin-top: 20px;
      color: #333;
      font-size: 14px;
      line-height: 22px;
      .order-status {
        padding-right: 40px;
        border-right: 1px solid #c4c4c4;
        min-height: 75px;
        padding-top: 10px;
        .order-number {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 10px;
        }
      }
      .line {
        margin-left: 40px;
        padding-top: 20px;
      }
    }
    .detail-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right-action {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .action {
          margin-right: 20px;
          img {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            cursor: pointer;
          }
        }
        .action:last-child {
          margin: 0;
        }
        .sub {
          display: inline-block;
          margin-right: 10px;
          margin-left: 10px;
          color: #909399;
          line-height: 1;
          font-size: 13px
        }
      }
    }
    .bz-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sub-wrap {
      border-radius: 5px;
      margin-bottom: 20px;
      overflow: hidden;
      .sub-title {
          padding: 10px;
          font-size: 16px;
          font-weight: 500;
          color: #363636;
          position: relative;
      }
      .sub-botton {
          padding: 5px 0px 10px;
          text-align: center;
          border-top: solid 1px #ededed;
          position: relative;
          background-color: #ffffff;
      }
      .sub-list {
          padding: 10px;
          height: 200px;
          .sub-row {
              margin-bottom: 10px;
              .top {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-bottom: 5px;
                  .name {
                      font-size: 14px;
                      font-weight: 500;
                      color: #363636;
                      margin-right: 10px;
                  }
                  .time {
                      font-size: 12px;
                      font-weight: 500;
                      color: #9ba0b1;
                      margin-right: 10px;
                  }
                  i {
                      cursor: pointer;
                  }
              }
              .bottom {
                  font-size: 14px;
                  color: #363636;
                  word-wrap: break-word;
              }
          }
      }
  }
  .box-card{
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
  }
  .box-card-active {
    width: 49%;
  }

    /deep/.el-dialog__title {
      font-weight: 500;
    }
    .tuikuan-body {
      .title {
        font-weight: 500;
        margin-bottom: 20px;
        font-size: 16px;
        color: black;
      }
      .tk-list {
        margin-bottom: 20px;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        span:nth-child(1) {
          font-weight: 500;
          margin-left: 15px;
          min-width: 70px;
        }
        span:nth-child(2) {
          margin-left: 8px;
        }
        .el-textarea {
          margin-left: 8px;
        }
      }
      .tuk {
        display: block;
        margin-bottom: 20px;
        .tk-title {
          display: flex;
          justify-items: flex-start;
          align-items: center;
          font-weight: 500;
        }
        .tk-con {
          display: flex;
          justify-items: flex-start;
          align-items: center;
          margin-top: 20px;
          margin-left: 15px;
          .label {
              font-size: 14px;
              color: #606266 !important;
          }
          .left {
            display: flex;
            justify-items: flex-start;
            align-items: center;
            margin-right: 20px;
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                appearance: none;
                margin: 0px;
            }
            span {
              font-size: 14px;
              margin-left: 20px;
              color: #606266 !important;
              font-weight: normal !important;
            }
          }
          .right {
            display: flex;
            justify-items: flex-start;
            align-items: center;
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                appearance: none;
                margin: 0px;
            }
            span {
              font-size: 14px;
              margin-left: 20px;
              color: #606266 !important;
              font-weight: normal !important;
            }
          }
        }
      }
    }
    .black-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      .label {
        width: 100px;
      }
    }
    .el-form--label-top .el-form-item__label{
      padding: 0;
    }
    .el-form-item{
      margin: 0;
    }
    .trad-main{
      p{
        line-height: 26px;
        font-size: 14px;
      }
    }
    .server-btn {
      margin-bottom: 10px;
      .sub-txt {
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
        color: #909399;
        line-height: 1;
        font-size: 13px;
      }
    }
    .trad-detail-model{
      margin-top: 20px;
      padding-bottom: 10px;
      p{
        line-height: 26px;
        font-size: 14px;
      }
      .title{
        font-size: 16px;
        font-weight: normal;
        padding: 20px 0;
      }
    }
    .account{
      display: flex;
      .head{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        img{
          width: 100%;
        }
      }
    }
  }
  .table-btn {
      cursor: pointer;
      color: #409EFF;
      font-size: 13px;
      font-weight: 500;
      &:hover {
          text-decoration: underline;
      }
  }
  /deep/ .top-title-com {
    margin-bottom: 0px;
  }
</style>
